<template>
  <div class="app-container home">
    <el-row :gutter="20" style="font-size:15px;">
      <el-col :span="5">
        <el-card shadow="always">
          <i class="el-icon-share" />在职总人数
          <el-row :gutter="20" style="margin:10px 0px;">
            <el-col :span="24" style="text-align: center;font-size:40px;">
              <count-to :start-val="0" :end-val="employeeTotal" :duration="2600" class="card-panel-num" />
            </el-col>
          </el-row>
          <el-row :gutter="20" style="text-align: right;">
            <el-col :span="21" style="color: #a09e9e;">本月入职</el-col>
            <el-col :span="1" style="font-size:16px;">0</el-col>
          </el-row>
        </el-card>
        <el-card shadow="always" style="margin-top:16px;">
          <i class="el-icon-share" />男总人数（在职）
          <el-row :gutter="20" style="margin:10px 0px;">
            <el-col :span="24" style="text-align: center;font-size:40px;">
              <count-to :start-val="0" :end-val="employeeMale" :duration="1000" class="card-panel-num" />
            </el-col>
          </el-row>
          <el-row :gutter="20" style="text-align: right;">
            <el-col :span="21" style="color: #a09e9e;">离职人数</el-col>
            <el-col :span="1" style="font-size:16px;">0</el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="5">
        <el-card shadow="always">
          <i class="el-icon-share" />离职总人数
          <el-row :gutter="20" style="margin:10px 0px;">
            <el-col :span="24" style="text-align: center;font-size:40px;">
              <count-to :start-val="0" :end-val="employeeTotalLeave" :duration="1" class="card-panel-num" />
            </el-col>
          </el-row>
          <el-row :gutter="20" style="text-align: right;">
            <el-col :span="21" style="color: #a09e9e;">本月离职</el-col>
            <el-col :span="1" style="font-size:16px;">0</el-col>
          </el-row>
        </el-card>
        <el-card shadow="always" style="margin-top:16px;">
          <i class="el-icon-share" />女总人数（在职）
          <el-row :gutter="20" style="margin:10px 0px;">
            <el-col :span="24" style="text-align: center;font-size:40px;">
              <count-to :start-val="0" :end-val="employeeFemale" :duration="1000" class="card-panel-num" />
            </el-col>
          </el-row>
          <el-row :gutter="20" style="text-align: right;">
            <el-col :span="21" style="color: #a09e9e;">离职人数</el-col>
            <el-col :span="1" style="font-size:16px;">0</el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="14">
        <el-card shadow="always">
          机构区域情况（在职）
          <div id="agency" :style="{height:height,width:width}" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="font-size:15px;margin-top:12px;">
      <el-col :span="5">
        <el-card shadow="always" style="padding-bottom:0px;">
          类型分布（在职）
          <div id="type" :style="{height:height,width:width}" />
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card shadow="always">
          层级人数情况（在职）
          <div id="level" :style="{height:height,width:width}" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top:12px;">
      <el-col :span="24">
        <el-card shadow="always">
          学历人数分布（在职）
          <el-row :gutter="40" class="panel-group">
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-people">
                  <svg-icon icon-class="size" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    高中
                  </div>
                  <count-to :start-val="0" :end-val="employeeSenior" :duration="2600" class="card-panel-num" />
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-message">
                  <svg-icon icon-class="swagger" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    大专
                  </div>
                  <count-to :start-val="0" :end-val="employeeJunior" :duration="3000" class="card-panel-num" />
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-money">
                  <svg-icon icon-class="tool" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    本科
                  </div>
                  <count-to :start-val="0" :end-val="employeeCollege" :duration="3200" class="card-panel-num" />
                </div>
              </div>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
              <div class="card-panel">
                <div class="card-panel-icon-wrapper icon-shopping">
                  <svg-icon icon-class="skill" class-name="card-panel-icon" />
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">
                    硕士
                  </div>
                  <count-to :start-val="0" :end-val="employeeMaster" :duration="3600" class="card-panel-num" />
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="20" style="margin-top:16px;">
      <el-col :span="6">
        <el-card shadow="always">
          合同签署情况
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          离职人数
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          已转正人数
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always">
          待转正人数
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import * as echarts from 'echarts';
import resize from './dashboard/mixins/resize';
import CountTo from 'vue-count-to'
import { listIndex } from "@/api/index";

export default {
  components: {
    CountTo
  },
  name: 'Index',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '248px'
    }
  },
  data() {
    return {
      // 人员表格数据
      employeeList: {},
      // 查询参数
      deptId: undefined,
      employeeTotal: 0,
      employeeMale: 0,
      employeeFemale: 0,
      employeeTotalLeave: 0,
      employeeMaleLeave: 0,
      employeeFemaleLeave: 0,
      employeeCivil: 0,
      employeeMilitary: 0,
      employeeCivilLeave: 0,
      employeeMilitaryLeave: 0,
      employeeSenior: 0,
      employeeJunior: 0,
      employeeCollege: 0,
      employeeMaster: 0,
      employeeLevel1: 0,
      employeeLevel2: 0,
      employeeLevel3: 0,
      employeeLevel4: 0,
      employeeLevel5: 0,
      employeeLevel6: 0,
      employeeLevel7: 0,
      employeeCLevel1: 0,
      employeeCLevel2: 0,
      employeeCLevel3: 0,
      employeeCLevel4: 0,
      employeeCLevel5: 0,
      employeeCLevel6: 0,
      employeeCLevel7: 0,
      employeeMLevel1: 0,
      employeeMLevel2: 0,
      employeeMLevel3: 0,
      employeeMLevel4: 0,
      employeeMLevel5: 0,
      employeeMLevel6: 0,
      employeeMLevel7: 0,
      employeeAgency1: 0,
      employeeAgency2: 0,
      employeeAgency3: 0,
      employeeAgency4: 0,
      employeeAgency5: 0,
      employeeAgency6: 0,
      employeeAgency7: 0,
      employeeAgency8: 0,
      employeeAgency9: 0,
    };
  },
  mounted() {
    this.getList();
  },
  created() {

  },
  methods: {
    /** 查询人员列表 */
    getList() {
      this.loading = true;
      var sdeptId = this.$store.state.user.deptId;
      var sdeptParentId = this.$store.state.user.deptParentId;
      if (sdeptParentId == 1 || sdeptParentId == 0) {
        this.deptId = sdeptId
      } else {
        this.deptId = sdeptParentId;
      }
      listIndex(this.deptId).then(response => {
        this.employeeList = response.data;
        this.initData();
        this.initChartType();
        this.initChartLevel();
        this.initChartAgency();
      });
    },
    goTarget(href) {
      window.open(href, '_blank');
    },
    initData() {
      this.employeeTotal = this.employeeList.employeeTotal;
      this.employeeMale = this.employeeList.employeeMale;
      this.employeeFemale = this.employeeList.employeeFemale;
      this.employeeTotalLeave = this.employeeList.employeeTotalLeave;
      this.employeeMaleLeave = this.employeeList.employeeMaleLeave;
      this.employeeFemaleLeave = this.employeeList.employeeFemaleLeave;
      this.employeeCivil = this.employeeList.employeeCivil;
      this.employeeMilitary = this.employeeList.employeeMilitary;
      this.employeeCivilLeave = this.employeeList.employeeCivilLeave;
      this.employeeMilitaryLeave = this.employeeList.employeeMilitaryLeave;
      this.employeeSenior = this.employeeList.employeeSenior;
      this.employeeJunior = this.employeeList.employeeJunior;
      this.employeeCollege = this.employeeList.employeeCollege;
      this.employeeMaster = this.employeeList.employeeMaster;
      this.employeeLevel1 = this.employeeList.employeeLevel1;
      this.employeeLevel2 = this.employeeList.employeeLevel2;
      this.employeeLevel3 = this.employeeList.employeeLevel3;
      this.employeeLevel4 = this.employeeList.employeeLevel4;
      this.employeeLevel5 = this.employeeList.employeeLevel5;
      this.employeeLevel6 = this.employeeList.employeeLevel6;
      this.employeeLevel7 = this.employeeList.employeeLevel7;
      this.employeeCLevel1 = this.employeeList.employeeCLevel1;
      this.employeeCLevel2 = this.employeeList.employeeCLevel2;
      this.employeeCLevel3 = this.employeeList.employeeCLevel3;
      this.employeeCLevel4 = this.employeeList.employeeCLevel4;
      this.employeeCLevel5 = this.employeeList.employeeCLevel5;
      this.employeeCLevel6 = this.employeeList.employeeCLevel6;
      this.employeeCLevel7 = this.employeeList.employeeCLevel7;
      this.employeeMLevel1 = this.employeeList.employeeMLevel1;
      this.employeeMLevel2 = this.employeeList.employeeMLevel2;
      this.employeeMLevel3 = this.employeeList.employeeMLevel3;
      this.employeeMLevel4 = this.employeeList.employeeMLevel4;
      this.employeeMLevel5 = this.employeeList.employeeMLevel5;
      this.employeeMLevel6 = this.employeeList.employeeMLevel6;
      this.employeeMLevel7 = this.employeeList.employeeMLevel7;
      this.employeeAgency1 = this.employeeList.employeeAgency1;
      this.employeeAgency2 = this.employeeList.employeeAgency2;
      this.employeeAgency3 = this.employeeList.employeeAgency3;
      this.employeeAgency4 = this.employeeList.employeeAgency4;
      this.employeeAgency5 = this.employeeList.employeeAgency5;
      this.employeeAgency6 = this.employeeList.employeeAgency6;
      this.employeeAgency7 = this.employeeList.employeeAgency7;
      this.employeeAgency8 = this.employeeList.employeeAgency8;
      this.employeeAgency9 = this.employeeList.employeeAgency9;
    },
    initChartType() {
      var chartDom = document.getElementById('type');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        mixins: [resize],
        color: ['#fac858', '#73c0de'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            data: [
              { value: 1048, name: '文职' },
              { value: 735, name: '勤务' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      var newData = [
        { value: this.employeeCivil, name: '文职' },
        { value: this.employeeMilitary, name: '勤务' }
      ];

      option.series[0].data = newData;
      option && myChart.setOption(option);
    },
    initChartLevel() {
      var chartDom = document.getElementById('level');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        mixins: [resize],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        toolbox: {
          feature: {
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['勤务', '文职', '汇总']
        },
        xAxis: [
          {
            type: 'category',
            data: ['一级', '二级', '三级', '四级', '五级', '六级', '七级'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '勤务',
            min: 0,
            max: Math.ceil(this.maxEmployeeLevel() / 100) * 100,//向上取整100的倍数
            interval: Math.ceil(Math.ceil(this.maxEmployeeLevel() / 100) * 100 / 2),
            axisLabel: {
              formatter: '{value} 人'
            }
          },
          {
            type: 'value',
            name: '汇总',
            min: 0,
            max: Math.ceil(this.maxEmployeeLevel() / 100) * 100,//向上取整100的倍数
            interval: Math.ceil(Math.ceil(this.maxEmployeeLevel() / 100) * 100 / 2),
            axisLabel: {
              formatter: '{value} 人'
            }
          }
        ],
        series: [

          {
            name: '勤务',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 人';
              }
            },
            data: [
              0, 0, 0, 300, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 800
            ]
          },
          {
            name: '文职',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 人';
              }
            },
            data: [
              0, 0, 0, 1050, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
          },
          {
            name: '汇总',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 人';
              }
            },
            data: [0, 0, 0, 2550, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      };
      var newData1 = [this.employeeMLevel1, this.employeeMLevel2, this.employeeMLevel3, this.employeeMLevel4,
      this.employeeMLevel5, this.employeeMLevel6, this.employeeMLevel7];

      var newData2 = [this.employeeCLevel1, this.employeeCLevel2, this.employeeCLevel3, this.employeeCLevel4,
      this.employeeCLevel5, this.employeeCLevel6, this.employeeCLevel7];

      var newData3 = [this.employeeLevel1, this.employeeLevel2, this.employeeLevel3, this.employeeLevel4,
      this.employeeLevel5, this.employeeLevel6, this.employeeLevel7];

      option.series[0].data = newData1;
      option.series[1].data = newData2;
      option.series[2].data = newData3;
      option && myChart.setOption(option);
    },
    initChartAgency() {
      var chartDom = document.getElementById('agency');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        mixins: [resize],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['汇总']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['市本级', '龙港区', '连山区', '南票区', '高新区', '兴城市', '绥中县', '建昌县', '杨家杖']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '汇总',
            type: 'line',
            stack: 'Total',
            data: [800, 132, 101, 134, 90, 230, 210, 900, 300]
          },
        ]
      };
      var newData = [this.employeeAgency1, this.employeeAgency2, this.employeeAgency3,
      this.employeeAgency4, this.employeeAgency5, this.employeeAgency6, this.employeeAgency7,
      this.employeeAgency8,this.employeeAgency9];

      option.series[0].data = newData;
      option && myChart.setOption(option);
    },
    maxEmployeeLevel(){
      return Math.max(
        this.employeeLevel1,
        this.employeeLevel2,
        this.employeeLevel3,
        this.employeeLevel4,
        this.employeeLevel5,
        this.employeeLevel6,
        this.employeeLevel7
      );
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  .el-icon-share {
    margin-right: 8px;
  }
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 0px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>

